<div class="gridFieldEditor row f-multi-select f-utils-fill p-2">
    <div class="f-utils-fill f-multi-select-list d-flex flex-column">
        <div class="f-utils-flex-column f-multi-select-list-content f-utils-fill">
            <legend class="f-multi-select-list-title">
                <span class="mr-auto"> 全部 </span>
                <div>
                    <!-- <span class="btn f-btn-ml btn-secondary" (click)="addButton()">新增</span> -->
                    <span class="btn f-btn-ml btn-secondary" (click)="deleteButton()">删除</span>
                </div>
            </legend>
            <div class="container columns-box f-utils-fill leftTree">
                <farris-treetable #leftTree [data]="leftTreeData" [idField]="'id'" [striped]="false"
                    [singleSelect]="false" [onlySelectSelf]="true" [showIcon]="false" [showCheckbox]="true"
                    [fixedHeader]="true" [showHeader]="false" [fit]="true" [checkOnSelect]="true" [selectOnCheck]="true"
                    [cascadeCheck]="false" [cascadeDown]="false" [cascadeUp]="false" [keepSelect]="false">
                    <ng-template farrisTemplate="body" let-rowNode let-treeNode="node" let-rowData="rowData">
                        <tr #row="row" [selectRow]="rowNode" [dblclick]="true"
                            [selectRowDisabled]="!canChecked(treeNode)">
                            <td style="border: 0" [style.color]="getTdStyleColor(!row.selectRowDisabled,treeNode)">

                                <farris-treeTableToggler [disabled]="!canChecked(treeNode)" [rowNode]="rowNode"
                                    [class.childNodeToggler]="treeNode.parent">
                                </farris-treeTableToggler>
                                {{rowData['text']}}
                            </td>
                        </tr>
                    </ng-template>
                </farris-treetable>
            </div>
        </div>
    </div>
    <div class="f-multi-select-list-btns">
        <button [title]="'右移'" class="btn btn-secondary f-btn-icon" type="button" (click)="moveToRight()">
            <span class="f-icon f-icon-arrow-chevron-right"></span>
        </button>
        <button [title]="'全部右移'" class="btn btn-secondary f-btn-icon right-all" type="button"
            (click)="moveAllToRight()">
            <span class="f-icon f-icon-arrow-seek-right"></span>
        </button>
        <button [title]="'左移'" class="btn btn-secondary f-btn-icon" type="button" (click)="moveToLeft()">
            <span class="f-icon f-icon-arrow-chevron-left"></span>
        </button>
        <button [title]="'全部左移'" class="btn btn-secondary f-btn-icon" type="button" (click)="moveAllToLeft()">
            <span class="f-icon f-icon-arrow-seek-left"></span>
        </button>
    </div>

    <div class="f-utils-fill f-multi-select-list d-flex flex-column">
        <div class="f-utils-flex-column f-multi-select-list-content f-utils-fill">
            <div class="f-multi-select-list-title d-flex ">
                <span class="mr-auto"> 已选择 </span>
            </div>
            <div class="container columns-box f-utils-fill rightTree">
                <farris-treetable #rightTree [data]="rightTreeData" [columns]="rightTreeColumns" [idField]="'id'"
                    [striped]="false" [singleSelect]="true" [showIcon]="false" [showCheckbox]="false"
                    [showHeader]="false" [fit]="true" [fixedHeader]="true" (nodeSelected)="selectRightNode($event)">

                </farris-treetable>
            </div>
        </div>
    </div>
    <div class="f-multi-select-list-btns">
        <button [title]="'置顶'" class="btn btn-secondary f-btn-icon" type="button" (click)="moveTop()">
            <span class="f-icon f-icon-roofing"></span>
        </button>
        <button [title]="'上移'" class="btn btn-secondary f-btn-icon right-all" type="button" (click)="moveUp()">
            <span class="f-icon f-icon-arrow-double-60-up"></span>
        </button>
        <button [title]="'下移'" class="btn btn-secondary f-btn-icon" type="button" (click)="moveDown()">
            <span class="f-icon f-icon-arrow-double-60-down"></span>
        </button>
        <button [title]="'置底'" class="btn btn-secondary f-btn-icon" type="button" (click)="moveBottom()">
            <span class="f-icon f-icon-bottomsetting"></span>
        </button>
    </div>

</div>

<!-- <div style="width: 270px;">
    <app-property-panel [(propertyConfig)]="propertyConfig" [(propertyData)]="propertyData" [showCloseBtn]="false"
        (propertyChanged)="propertyChanged($event)" [dynamicControl]="true" isWhiteTheme="true">
    </app-property-panel>
</div> -->
<ng-template #modalFooter>
    <button type="button" class="btn btn-secondary" (click)="clickCancel()">取消</button>
    <button type="button" class="btn btn-primary" (click)="clickOK()">确定</button>
</ng-template>



<ng-template #textColTpl let-ctx>
    {{ctx.node.data['text']}}
    <!-- <span class="ml-3 btn-icontext">
        <span class="f-icon f-icon-plus-circle text-info" title="添加下级按钮" (click)="addChildButton(ctx.node)">
        </span>

        <span class="f-icon f-icon-delete text-danger" title="删除" *ngIf="ctx.node.parent"
            (click)="deleteChildButton(ctx.node)">
        </span>
    </span> -->
</ng-template>